<template>
	<view>
		<view class="search">
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入员工姓名" v-model="queryParams.empName" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-mauve shadow-blur round" @click="searchRecord()">搜索</button>
				</view>
			</view>
		</view>
		<u-empty v-if="records.length===0" icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
		<view class="topInfo baseBack align-center" v-for="item in records">
			<view class="flex padding-top-sm">
				<view style="font-size: 35rpx; margin-right: auto;;margin-left: 25rpx;">{{ item.devNum }}</view>
				<view style="width: 30%;">{{ item.empName }}</view>
				<view style="color:#AC58FA"> {{parseRate(item.rate)}}%</view>
				<view style="width: 20%;margin-left: auto;color:#AC58FA;">{{ parseNumber(item) }} 圈</view>
			</view>
			<view class="conXuxian">
				<view class="splitArea"></view>
			</view>
			<view class="flex padding-bottom-sm">
				<view style="margin-left: 20rpx;width: 55%;">
					<text style="color:#AC58FA"> 上班</text>
					<text class="timeInfo">{{ parseTime(item.createTime) }}</text>
				</view>
				<view style="margin-right: auto;">
					<text style="color:#AC58FA;"> 下班</text>
					<text class="timeInfo">{{ parseTime(item.endTime) }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
	import watermark from 'components/warter/watermark.vue'
	import moment from 'moment'
	import {
		runlist
	} from '@/api/record/record.js'

	export default {
		components: {
			watermark
		},
		data() {
			return {
				status: "more",
				companyName: this.$store.getters.name,
				records: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					taskId: null,
					userId: this.$store.getters.userId,
					devSn: null,
					startNum: null,
					endNum: null,
					companyId: this.$store.getters.companyId,
					empName: null
				},
				count: 0,
			}
		},
		mounted() {
			this.getRecord()
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1;
			this.getRecord();
		},
		onReachBottom() {
			if (this.count > this.records.length) {
				this.queryParams.pageNum++;
				runlist({
					...this.queryParams
				}).then((res) => {
					this.total = res.total;
					this.records = _.concat(this.records, res.rows);
					uni.hideLoading();
					if (this.total <= this.records.length) {
						this.status = "no-more";
					}
				});
			} else {
				this.status = "no-more";
			}
		},
		methods: {
			parseRate(rate) {
				if (rate) {
					return _.parseInt(rate, 16)
				} else {
					return 0
				}
			},
			getRecord() {
				runlist(this.queryParams).then(res => {
					this.records = res.rows
					this.count = res.total
					uni.stopPullDownRefresh();
				})
			},
			searchRecord() {
				this.getRecord()
			},
			parseNumber(item) {
				if (item.endNum != null) {
					return Math.abs(item.startNum - item.endNum)
				} else {
					return '--'
				}
			},
			parseTime(time) {
				if (time) {
					return moment(time).format("MM/DD HH:mm")
				} else {
					return '还未下班'
				}
			}
		}
	}
</script>
<style>
	page {
		height: 101%;
	}
</style>
<style>
	.topInfo {
		margin: 30rpx auto 0rpx auto;
	}

	.search {
		background-color: #fff;
		height: 100rpx;
	}

	.baseBack {
		width: 92%;
		background-color: #fff;
	}

	.conXuxian {
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.splitArea {
		border: none;
		border-top: 3rpx solid #d8d8d8;
		width: 90%;
	}

	.timeInfo {
		color: gray;
		font-size: 20rpx;
		margin-left: 20rpx;
	}
</style>
